3 files changed, 36 insertions, 0 deletions
diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
new file mode 100644
index 0000000..c368f75
--- /dev/null
+++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
@@ -0,0 +1,27 @@
+"use client";
+import { useState, useEffect } from "react";
+import styles from "./read.module.css";
+
+export default function CurrentReading() {
+	const [chapter, setChapter] = useState(null);
+	const [volume, setVolume] = useState(null);
+
+	useEffect(() => {
+		setChapter(localStorage.getItem("chapter") || "");
+		setVolume(localStorage.getItem("volume") || "");
+	});
+
+	return CR(chapter, volume);
+}
+
+function CR(chapter, volume) {
+	return (
+		<div className={styles.CurrentReadingContainer}>
+			{chapter && volume && (
+				<p>
+					Vol {volume} Chapter {chapter}
+				</p>
+			)}
+		</div>
+	);
+}
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index 7369ba0..e584ee2 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -1,6 +1,7 @@
 import styles from "./read.module.css";
 import Image from "next/image";
 import DownloadManga from "./download";
+import CurrentReading from "./currentReading";
 
 export default async function Read({ params }) {
 	const chapterId = params.read;
@@ -23,6 +24,7 @@ export default async function Read({ params }) {
 
 	return (
 		<div className={styles.Main}>
+			<CurrentReading />
 			<div className={styles.ImageContainer}>
 				<DownloadManga chapterId={chapterId} />
 				{images &&
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index d240d80..a95dcfe 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -49,6 +49,13 @@
 	background-color: var(--pastel-red);
 }
 
+.CurrentReadingContainer {
+	text-align: center;
+	color: white;
+	font-family: "Quicksand";
+	font-size: 18px;
+}
+
 @media screen and (max-width: 768px) {
 	.ImageContainer img {
 		width: 95%;